<script setup>
defineOptions({
  name: "Workspace",
});
import { useUserStore, useThemeStore } from '@/stores';
import { useRoute,useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();


import MenuCard from './com/menuCard.vue';
import { watch } from 'vue';

const userStore = useUserStore();
const menuItems = computed(() => {
  const menus = userStore.getMenuTree || [];
  // 过滤掉根路径/的菜单项，只显示实际的菜单
  return menus.map((item) => {
    if (item.path !== '/') {
      return item;
    }
    return item.children?.[0] || item;
  });
});


const findMenu = (menus,menuId)=>{
  return menus.find((item) => {
    if (item.id == menuId) {
      return item;
    }
    if(item.children){
        const res = findMenu(item.children,menuId);
        if(res){
          return res;
        }
    }
  });
}

const currentMenu = ref([]);
watch(()=>route.params,(n,o)=>{
  console.log(n,"n");

  const { menuId } = n;
  if(menuId){
    const menu = findMenu(menuItems.value,menuId);
    if(menu){
      currentMenu.value = menu.children;
    }else{
      currentMenu.value = menuItems.value;
    }
  }else{
    currentMenu.value = menuItems.value;
  }
}, { immediate: true })
const handleClick = (menu)=>{
  router.push({
    path: "/redirect/workspace/"+menu.id,
  })
}
</script>

<template>
  <MViewLayout class="workspace-wrapper">
    <a-flex wrap="wrap" gap="small">
        <MenuCard v-for="menu in currentMenu" :key="menu.path" :menu="menu" @click="handleClick(menu)"></MenuCard>

    </a-flex>
  </MViewLayout>
</template>

<style lang="less" scoped>
.workspace-wrapper{
  .ant-flex{
    background-color: var(--theme-bg);
    padding: 1rem;
    border-radius: 10px;
  }
}
</style>
